<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab切换</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            width: 100vw;
            height: 100vh;
            align-items: center;
            justify-content: center;
        }
        main{
            width: 400px;
            flex-direction: column;
            position: relative;
            margin-right: 30px;
        }
        main nav{
            display: flex;
            flex-direction: row;
            height: 50px;
            align-items: center;
        }
        main nav a{
            text-decoration: none;
            padding: 10px 20px;
            background-color: #30336b;
            color: aliceblue;
            border: 1px solid #7ed6df;
        }
        main nav a:first-of-type{
            background: #eb4d4b;
            font-weight: bold;
        }
        main nav a:hover{
            background: #be2edd;
            font-weight: bold;
        }
        /*编写面板的样式*/
        section{
            width: 100%;
            height: 350px;
            background-color: #ff7979;
            position: absolute;/*绝对定位，两个全部放在一起了*/
            font-size: 5em;
            display: none;
        }
        section:first-of-type{
            display: block;
        }
        section:nth-child(even){
            background: #6ab04c;
        }

    </style>
</head>
<body>
    <main class="tab1">
        <nav>
            <a href="javascript:;">后盾人</a>
            <a href="javascript:;">hdcms</a>
        </nav>
        <section>后盾人</section>
        <section>hdcms</section>
    </main>
    <main class="tab2">
        <nav>
            <a href="javascript:;">后盾人</a>
            <a href="javascript:;">hdcms</a>
        </nav>
        <section>后盾人</section>
        <section>hdcms</section>
    </main>
</body>
</html>
<script>

    /*
     总结
     1:使用严格模式
     2:声明一个动画类，并添加上需要的属性方法
     3:声明一个需要操作的对象类
     4:使得这个对象类继承动画类的方法，目的就是，这个对象可以使用动画类中的所有方法
     5:初始化的时候，就需要的元素全部初始化，需要的时候直接使用
     6:按照逻辑进行处理，需要操作当前对象的，就要在当前对象的原型上添加方法
     7:所用的知识点   (1) Object.create  (2)call 
    */


    "use strict";
    //对象工厂
    function extend(sub,sup){
        sub.prototype = Object.create(sup.prototype);
        sub.prototype.constructor = sub;
    }

    //声明一个动画类
    function Animation(){}

    //给动画添加显示的方法
    Animation.prototype.show = function(){
        this.style.display = 'block';
    }

    //给动画添加隐藏的方法
    Animation.prototype.hide = function(){
        this.style.display = 'none';
    }

    //给动画添加改变背景颜色的方法
    Animation.prototype.background = function(color){
        this.style.background = color;
    }

    Animation.prototype.color = function(color){
        this.style.color = color;
    }

    //因为要操作的对象是tab，所以要声明一个tab类
    function Tab(tab){
        this.tab = tab;
        this.links = null;
        this.sections = null;
    }

    extend(Tab,Animation);



    //要初始化数据
    //刚进入就要直接进行执行的
    Tab.prototype.run = function(){
        //这边需要两个点击按钮
        this.links = this.tab.querySelectorAll('a');
        //找到当前tab里面的面板
        this.sections = this.tab.querySelectorAll('section');
        //给当前的tab添加点击事件
        this.bindEvent();
    }

    Tab.prototype.bindEvent = function(){
        this.links.forEach((el,i) => {
            el.addEventListener('click',()=>{
                //点击之前，将所有的按钮和面板进行初始化
                this.reset();
                //点击的时候将当前的颜色进行切换
                this.action(i);
            });
        });
    }

    //处理当前按钮
    Tab.prototype.action = function(i){
        this.background.call(this.links[i],'#eb4d4b');
        this.color.call(this.links[i],'#130f40');
        //切换当前面板
        this.show.call(this.sections[i]);
    }

    //重置操作
    //说明:因为重置的是面板上的东西，所以需要给面板添加方法
    Tab.prototype.reset = function(){
        this.links.forEach((item,i) => {
            this.background.call(item,'#30336b');
            this.hide.call(this.sections[i]);
        });
    }
    

    new Tab(document.querySelector('.tab1')).run();
    new Tab(document.querySelector('.tab2')).run();


</script>